<template>
	<view class="container">
		<top-back-navbar position="fixed" title="维度" background="#000" color="#fff" right_color='#fff'
			right_title='添加'></top-back-navbar>
		<cxsytabbars :current="0"></cxsytabbars>
		<!-- 轮播图 -->
		<view class="">
			<swiper class="swiper-box">
				<swiper-item v-for="(item, index) in home_data.banner_list" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<image :src="item.thumb" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="contoan">


			<view class="jiaoyi_box">
				<view class="cangdan"  @click="jumpto('/pagesZA/position/cd_CTC_order2')">

				</view>
				<view class="mipiao" @click="jumpto('/pagesZA/position/kz_CTC_order2')">

				</view>
			</view>
			
			<!-- 商品头部 -->
			<view class="shop_title">
				<view class="" style="opacity: 0 ;">
					更多>
				</view>
				<view class="text">
					
				</view>
				<view class=""  @click="jumpto('/pagesZA/goods/goods?gift=30')">
					更多>
				</view>
			</view>
				<!-- 商品列表 -->
				<view class="shop_item_box">
					
					<view class="item" v-for="item in home_data.goods_info" @click="todetails(item)">
						<image :src="item.thumb" style="width: 100%;height: 62%;border-radius: 8px;" mode=""></image>
						
						<view class="" style="width: 90%;height: 38%;margin: 0 auto;">
							<view class="num" style="font-weight: 900;font-size: 12px;white-space: nowrap; overflow: hidden;  letter-spacing: 1px;text-overflow: ellipsis;line-height: 17px;margin-top: -6px;">
								{{item.title}}
							</view>
							<view class="" style="font-weight: 800;display: flex;justify-content: space-between;padding: 0 3px;">
								<view class="num" style="font-size: 14px;line-height: 17px;  letter-spacing: 1px;">
									¥{{item.marketprice}}
								</view>
								
							</view>
							<view class="" style="padding: 0 3px;">
								<view class=""  style="color: #fff;font-size: 10px;line-height: 17px;  letter-spacing: 1px;">
									仓量:&nbsp;{{item.cangliang}}
								</view>
								<view class="" style="color: #fff;font-size: 10px;line-height: 15px;  letter-spacing: 1px;">
									粮票:&nbsp;{{item.kuangshi}}
								</view>
								<view class="" style="letter-spacing: 1px;background-color: #7316F3; font-size: 10px;color: #fff;border-radius: 50px;padding:3px 12px;line-height: 10px;text-align: center;">
									购买
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
			
			
			
			
			<view class="jifen_title">
				<view class="" style="opacity: 0 ;">
					更多>
				</view>
				<view class="text">
					
				</view>
				<view class="" @click="jumpto('/pagesZA/goods/duihuan?gift=15')">
					更多>
				</view>
			</view>
			
			<!-- 积分盒子 -->
			<view class="jifen_box">
				
				<view class="item" v-for="item in home_data.jifen_goods_info" @click="show_model_duihuan(item)">
					<image :src="item.thumb" style="width: 100%;height: 75%;border-radius: 8px;" mode=""></image>
					
					<view class="" style="width: 100%;padding-left: 3px;">
						<view class="num" style="padding: 0 3px;font-weight: 800;font-size: 14px;position: relative;top: -10px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">
							{{item.title}}
						</view>
						<view class="" style="display: flex;position: relative;top: -18px;justify-content: space-between;align-items: center;padding: 0 3px;">
							<view class="num" style="font-weight: 800;font-size: 16px;letter-spacing: 1px;">
								¥{{item.marketprice}}
							</view>
							<view class="" style="font-size: 10px;background-color: #7316F3; color: #fff;border-radius: 50px;padding: 0 10px;margin-right: 5px;letter-spacing: 1px;">
								兑换
							</view>
						</view>
					</view>
					
				</view>
				
			</view>

		</view>
		
		<view class="mask" :class="show" @touchmove.stop.prevent="hide"></view>
		<view class="mask" :class="show2" @touchmove.stop.prevent="hide"></view>
		<view class="gengxing" :class="show2" :style="{pointerEvents:pointerevents}">
		
			<!-- 更新进度条 -->
			<view v-if="show8 == 0" style="z-index: 3;">
				
				<view class="title" style="color: #B0AEDA;font-size: 20px;"><text>V{{version}}</text></view>
				<view class="title" style="color: #817CCF;font-size: 20px;"><text>版本更新!</text></view>
				<view class="message">
					<view class="" v-for="item in notice">
						<text style="font-weight: 500;">【{{item.item}}】</text>
						<text style="color: #4a4a4a;">{{item.value}}</text>
					</view>
				</view>
				<view class="dl" @click="download" v-if="link == '4G'">{{dlbtn}}</view>
				<view class="dl" v-else>{{dlbtn}}</view>
			</view>
		</view>
		
		
		
	</view>

</template>

<script>
	import BottomImageMenu from '@/components/bottom-mask/bottom-mask.js'
	// #ifdef APP-PLUS
	var bottomImageMenu = new BottomImageMenu(() => {})
	// #endif
	export default {
		data() {
			return {
				home_data:{},
				openid:'',
				system: {}, // 获取手机系统信息
				data: [],
				appversion: '',
				version: '',
				show: '',
				show2: "",
				show3: 'show',
				link: "",
				dlbtn: "",
				newtext: "",
				right: '100%',
				titleNViewBackground: '', //轮播图区域
				swiperCurrent: 0,
				swiperLength: 0,
				goodsList: [],
				backgroundColor: 'transpant',
				pointerevents: 'auto',
				ad: false,
				adv: {},
				autoclose: '',
				picturew: [],
				picturew_row: '',
				message: '',
				helpmoney: '',
				show8: '',
				
				navbarHeight: '170rpx',
				marginTops: 0,
				versionUrl: '',
				notice:''
			};
		},
		onLoad: function() {
			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
			
					_this.openid = id
			
				},
				fail: function(err) {
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
			
			if (uni.getSystemInfoSync().platform === 'android') {
				var _this=this
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=acommsion.getappversion&app=1',
					method: 'POST',
					success: res => {
						_this.versionUrl = res.data.url
						//#ifdef APP-PLUS
						
						uni.getSystemInfo({
							success(ress) {
								var edition = ress.appWgtVersion //获取当前版本号：1.0.1
								//将版本号转变为101格式
								edition = edition.split(".")
								var ary = ''
								for (var i in edition) {
									ary += edition[i]
								}
								
								console.log(res.data,ary);
								if (res.data.version > ary) { //判断如果版本低于服务器版本
									_this.ad = false // 更新时阻止弹出系统广告
									//将版本号101转变为1.0.1格式
									_this.notice=res.data.notice
									var newversion = ''
									for (var i in res.data.version) {
										newversion += res.data.version[i] + '.'
									}
									_this.version = newversion.slice(0, newversion.length - 1)
									//------------------
									_this.show2 = 'show' //蒙版出现
									bottomImageMenu.show() // 遮挡底部菜单栏的蒙版
									console.log(plus.networkinfo.getCurrentType() );
									if (plus.networkinfo.getCurrentType() != 3) { //如果不是WIFI
									console.log(1);
										_this.link = '4G'
										_this.dlbtn = '使用流量下载'
										_this.newtext = '您当前未使用wifi，已停止下载'
										var nowlink = setInterval(() => {
											if (plus.networkinfo.getCurrentType() == 3) {
												clearInterval(nowlink)
												_this.download() //下载
											}
										}, 2000)
									} else {
											
										_this.dlbtn = '使用WIFI下载'
										_this.download() //下载
									}
									console.log(_this.dlbtn);
								}
							}
						})
						
						//#endif
					},
					fail: () => {},
					complete: () => {},
				});
			}
			
			
			
			
			
			
			
			this.get_data()
		},
		methods: {
			download() {
				this.pointerevents = 'none'
				this.link = 'wifi'
				this.dlbtn = '正在下载 0%'
				this.newtext = '正在后台下载，请稍后'
				let _this = this
				var downToak = plus.downloader.createDownload(this.versionUrl, { //拿到下载任务的对象
					filename: '_doc/update/'
				}, function(d, status) {
					plus.nativeUI.closeWaiting();
					if (status == 200) { //在回调中根据状态 进行操作
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(
							error) {
							uni.showToast({
								title: '安装失败',
								mask: false,
								duration: 1500
							});
						})
					} else {
						app.alert("配置出错,请检查网络链接！");
					}
				});
				downToak.start(); // 开启下载的任务
				var prg = 0;
				downToak.addEventListener("statechanged", function(task, status) { //给下载任务设置一个监听 并根据状态  做操作
					switch (task.state) {
						case 1:
							break;
						case 2:
							break;
						case 3:
							prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task.totalSize) * 100);
							_this.dlbtn = '正在下载 ' + prg + '%'
							_this.right = 100 - Number(prg) + '%'
							break;
						case 4:
							break;
					}
				});
			},
			show_model_duihuan(value) {
				var _this = this
				uni.showModal({
					title: `使用积分兑换${value.title}商品`,
					placeholderText: '输入数量(件)',
					editable: true,
					success(res) {
			
						if (res.confirm) {
							_this.duihuan_sure(res.content, value.id)
						}
					}
				})
			},
			duihuan_sure(num, id) {
			
				uni.request({
					url: `${this.$BASE_URL}/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cxrz_submit&app=1`,
					method: 'POST',
					data: {
						'openid': this.openid,
						'num': num,
						'id': id,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						var data = res.data
						uni.showToast({
							icon: 'none',
							title: data.message
						})
					},
					fail: () => {},
					complete: () => {}
				})
			},
			todetails(item) {
				var path = `/pages/goods/detail?goodsid=${item.id}&type='cxsy'`
				uni.navigateTo({
					url: path
				});
			
			},
			jumpto(path) {
				console.log(path);
				uni.navigateTo({
					url: path
				});
			},
			get_data(){
			
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.index_info&app=1',
				
					success: res => {
						var data = res.data
						var code = data.error
						console.log(data);
						this.home_data=data
						
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			}

		}
	}
</script>

<style lang="less" scoped>
	page {
		// height: calc(100vh - 100upx);
	}
	
	.container {

		height: 180vh;
		background: url('/static/zn/home_bg.png') 0 0 no-repeat;
		background-size: 150% 106%;
		position: relative;
		overflow: auto;
	}
	.num{

		background: linear-gradient(to bottom, #FBEDB9, #FFB85C, );
		align-items: center;
		background-clip: text;
		color: transparent;

	}
	.swiper-box {
		height: 300rpx;
		width: 100vw;

		.swiper-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 250rpx;
			color: #fff;
		}

		.swiper-item0 {
			background-color: #cee1fd;
		}

		.swiper-item1 {
			background-color: #b2cef7;
		}

		.swiper-item2 {
			background-color: #cee1fd;
		}

		.image {
			width: 750rpx;
		}

		/* #ifndef APP-NVUE */
		::v-deep .image img {
			-webkit-user-drag: none;
			-khtml-user-drag: none;
			-moz-user-drag: none;
			-o-user-drag: none;
			user-drag: none;
		}

		/* #endif */

		@media screen and (min-width: 500px) {
			.uni-swiper-dot-box {
				width: 400px;
				margin: 0 auto;
				margin-top: 8px;
			}

			.image {
				width: 100%;
			}
		}

		.uni-bg-red {
			background-color: #ff5a5f;
		}

		.uni-bg-green {
			background-color: #09bb07;
		}

		.uni-bg-blue {
			background-color: #007aff;
		}

		.example-body {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding: 20rpx;
		}

		.example-body-item {

			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 15rpx;
			padding: 15rpx;
			height: 60rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			padding: 0 15rpx;
			/* #endif */
			flex: 1;
			border-color: #e5e5e5;
			border-style: solid;
			border-width: 1px;
			border-radius: 5px;
		}

		.example-body-item-text {
			font-size: 28rpx;
			color: #333;
		}

		.example-body-dots {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50px;
			background-color: #333333;
			margin-left: 10rpx;
		}

		.active {
			border-style: solid;
			border-color: #007aff;
			border-width: 1px;
		}
	}
	
	
	.contoan{
		width: 100vw;
		
		padding: 40rpx 15px;
		padding-bottom: 80vh;
		.jiaoyi_box{
			width: 100%;
			display: flex;
			justify-content: space-between;
			
			view{
				width: 45%;
				height: 180rpx;
			}
			.cangdan{
				background:  url('/static/zn/cangdanjiaoyi_button.png')0 0 no-repeat;
				background-size: 100% 100%;
			}
			.mipiao{
				background:  url('/static/zn/mipiaojiaoyi_button.png')0 0 no-repeat;
				background-size: 100% 100%;
			}
		}
		
		
		.shop_title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			color: #fff;
			margin: 15rpx 0;
			.text{
				width: 35%;
				height: 55rpx;
				background: url('/static/zn/home_shop2.png') 0 0 no-repeat;
				background-size: 100% 100%;
			}
		}

		
		.jifen_title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			color: #fff;
			margin: 15rpx 0;
			.text{
				width: 35%;
				height: 55rpx;
				background: url('/static/zn/home_duihuan2.png') 0 0 no-repeat;
				background-size: 100% 100%;
			}
		}
		.shop_item_box{
			width: 100%;
			background: url('/static/zn/jifen_box.png') 0 0 no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			padding: 10px 0;
			.item{
				
				margin-top: 10rpx;
				width: 43vw;
				height: 63vw;
				background-color: #fff;
				background: url('/static/zn/home_shop_item_box.png') 0 0 no-repeat;
				background-size: 100% 100%;
				padding: 9px;
				
			}
		}
		.jifen_box{
		
			width: 100%;
			height: 850rpx;
			padding-bottom: 25rpx;
			background: url('/static/zn/jifen_box.png') 0 0 no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			padding: 10px 0 20px;
			.item{
				margin-top: 10rpx;
				width: 43vw;
				height: 50%;
				
				background: url('/static/zn/jifen_item.png') 0 0 no-repeat;
				background-size: 100% 100%;
				padding: 9px;
				
			}
		}
		
	}
	
	
	.shop_item_box{
		.title{
			width: 100%;
			text-align: center;
			color: #F4D8B2;
			font-size: 20px;
			font-weight: 800;
		}
		.price{
			width: 100%;
			text-align: center;
			color: #F4D8B2;
			font-size: 20px;
			font-weight: 800;
		}
	}
.mask {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
	}

	.mask,
	.tips {
		display: none;
	}

	.mask.show,
	.gengxing.show {
		display: block !important;
	}

	.mask4 {
		position: fixed;
		z-index: 99999;
		top: 0;
		left: 0;
		background: #fff;
	}

	.gengxing {
		position: fixed;
		z-index: 999;
		width: 480upx;
		height: 600upx;
		top: 50%;
		left: 50%;
		margin-left: -240upx;
		margin-top: -380upx;
		background-size: cover;
		display: none;
		overflow: hidden;
		background:  url('/static/zn/up_data.png') 0 0 no-repeat;
		background-size: 100% 100%;
		padding: 20px;
	}



	.dl {
		position: absolute;
		bottom: 40upx;
		background: transparent;
		font-size: 34upx;
		width: 100%;
		color: #fff;
		line-height: 100upx;
		z-index: 999;
		right: 0;
		left: 0;
		text-align: center;
		margin:  auto;
		
	}
	
	.message{
		margin-top: 100upx;
	}
</style>